<template id="AppEditModal">
  <a-modal
    v-model:open="openEditModal"
    title="编辑应用信息"
    :footer="null"
    width="700px"
    style="top: 20px"
    destroyOnClose
    @cancel="handleCloseModal"
  >
    <!-- <a-table :columns="columns" :data-source="dataSource" bordered></a-table> -->
    <div class="edit-card" style="margin-top: 20px">
      <div class="edit-card-content">
        <a-form :model="app" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-form-item label="应用名称">
            <a-input v-model:value="app.appName" show-count :maxlength="20" allow-clear />
          </a-form-item>
          <a-form-item label="应用封面">
            <!-- <a-input v-model:value="app.cover" /> -->
            <!-- 预览图 -->
            <UploadImage v-model:fileUrl="app.cover" />
            <!-- <p class="edit-card-image" style="background-color: #FAFAFA; margin-top: 10px;padding: 0px 20px;box-shadow: 0 0 5px #ccc;">
              <a-image
                :src="app.cover"
                style="width: 100px; height: 100px; margin-top: 10px"
              ></a-image>
              <p style="font-size: 12px; color: #999;">支持图片链接，建议尺寸：400 x 300</p>
            </p> -->
          </a-form-item>
          <a-form-item label="优先级">
            <a-input v-model:value="app.priority" :disabled="!isAdmin" allow-clear />
          </a-form-item>
          <a-form-item label="初始提示词">
            <a-textarea
              v-model:value="app.initPrompt"
              placeholder="请输入初始提示词"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              show-count
              :maxlength="1000"
              disabled
            >
            </a-textarea>
            <p style="font-size: 12px; color: #999">初始提示词不可修改</p>
          </a-form-item>

          <a-form-item label="生成类型">
            <a-input v-model:value="app.codeGenType" :disabled="true" allow-clear />
            <p style="font-size: 12px; color: #999">生成类型不可修改</p>
          </a-form-item>

          <a-form-item label="部署密钥">
            <a-input v-model:value="app.deployKey" :disabled="true" allow-clear />
            <p style="font-size: 12px; color: #999">部署密钥不可修改</p>
          </a-form-item>
        </a-form>
      </div>
      <div class="edit-footer-btn" style="text-align: center">
        <a-space>
          <a-button type="primary" @click="handleEditApp" :loading="loading">保存修改</a-button>
          <a-button type="default" @click="handleResetApp">重置</a-button>
          <a-button type="link" @click="goToChat">进入对话</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { useLoginUserStore } from '@/stores/loginUser'
import UploadImage from './UploadImage.vue'

interface props {
  app?: API.AppVo
  openEditModal: boolean
  editLoading: boolean
}

interface Emits {
  (e: 'handleEditApp', app: API.AppVo): void
  (e: 'update:editLoading', loading: boolean): void
  (e: 'update:openEditModal', openEditModal: boolean): void
}

const props = withDefaults(defineProps<props>(), {
  openEditModal: false,
  editLoading: false,
})
const router = useRouter()
const loading = ref<boolean>(props.editLoading)
const app = ref<API.AppVo>({ ...props.app })
const openEditModal = ref<boolean>(props.openEditModal)

const emit = defineEmits<Emits>()

const loginUserStore = useLoginUserStore()

// 是否是管理员
const isAdmin = computed(() => {
  return loginUserStore.loginUser?.userRole === 'admin'
})

watch(
  [() => props.openEditModal, () => props.editLoading],
  ([val, editLoading], [prevVal, prevEditLoading]) => {
    openEditModal.value = val
    loading.value = editLoading
    if (val) {
      Object.assign(app.value, props.app)
    }
  },
  { deep: true },
)

const handleEditApp = () => {
  // openEditModal.value = true
  loading.value = true
  emit('update:editLoading', loading.value)
  emit('handleEditApp', app.value)
}

const handleCloseModal = () => {
  openEditModal.value = false
  emit('update:openEditModal', openEditModal.value)
}

const handleResetApp = () => {
  Object.assign(app.value, props.app)
}

const goToChat = () => {
  if (!app.value.id) return
  router.push({ path: `/app/chat/${app.value.id}` })
}
</script>
